---
import UIString from '../UIString.astro';
import FeedbackButton from './FeedbackButton.astro';
import TutorialNav from './TutorialNav.astro';
---

<nav>
	<details class="tut-mobile-container">
		<summary class="tut-mobile-header">
			<div class="tut-mobile-header-content">
				<div class="tut-toggle">
					<h2 class="heading">
						<UIString key="tutorial.trackerLabel" />
					</h2>
					<svg
						xmlns="http://www.w3.org/2000/svg"
						viewBox="0 1 16 16"
						width="16"
						height="16"
						aria-hidden="true"
					>
						<path
							fill-rule="evenodd"
							d="M6.22 3.22a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06L9.94 8 6.22 4.28a.75.75 0 010-1.06z"
						></path>
					</svg>
				</div>
			</div>
		</summary>
		<div class="tut-nav-content">
			<TutorialNav id="mobile" />
		</div>
	</details>
	<div class="feedback">
		<FeedbackButton />
	</div>
</nav>

<style>
	nav {
		position: relative;
		--header-bottom-padding: 1.5rem;
	}

	@media (min-width: 50em) {
		/* Improve toggle & title alignment with left sidebar */
		nav {
			--header-bottom-padding: 0.5rem;
		}
	}

	/* The mobile container is a <details> element wrapping the mobile TOC */
	.tut-mobile-container > .tut-mobile-header::marker,
	.tut-mobile-container > .tut-mobile-header::-webkit-details-marker {
		display: none;
	}

	.tut-mobile-container[open] .tut-toggle svg {
		transform: rotate(90deg);
	}

	/*
	The mobile header is the clickable <summary> heading.

	It has a opaque background and covers the entire viewport width
	to ensure that page content scrolling underneath is hidden.
*/
	.tut-mobile-header {
		display: block;
		cursor: pointer;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		background: var(--theme-bg-gradient-top);
		-webkit-tap-highlight-color: transparent;
	}

	.tut-mobile-header-content {
		display: flex;
		align-items: center;
		height: var(--theme-mobile-toc-height);
		max-width: 80ch;
		margin-inline: auto;
		padding-bottom: var(--header-bottom-padding);
		padding-inline: var(--min-spacing-inline);
	}

	.tut-toggle {
		margin-inline-end: 0.5rem;
		border-radius: 0.5rem;
		border: 1px solid var(--theme-shade-subtle);
		padding: 0.25rem 0.75rem;
		padding-inline-end: 0.5rem;
		font-size: var(--theme-text-sm);
	}

	.tut-toggle svg {
		margin-inline-start: 0.25rem;
	}

	.tut-mobile-header h2 {
		margin: 0;
		display: inline;
	}

	.tut-mobile-container[open] .tut-toggle {
		background-color: var(--theme-bg-offset);
	}

	.tut-toggle svg {
		transform: rotate(0);
		transition: 0.15s transform ease;
		vertical-align: middle;
		fill: var(--theme-accent-secondary);
		stroke: var(--theme-accent-secondary);
	}

	@media (forced-colors: active) {
		.tut-toggle svg {
			fill: Highlight;
			stroke: Highlight;
		}
	}

	.tut-nav-content {
		margin-inline: var(--min-spacing-inline);
		max-height: calc(
			var(--cur-viewport-height) - var(--theme-navbar-height) - var(--theme-mobile-toc-height) -
				1rem
		);
		overflow-y: auto;
		border: 1px solid var(--theme-shade-subtle);
		border-radius: 0.5rem;
		font-size: var(--theme-text-sm);
		background: var(--theme-bg);
		transform: translateY(calc(-0.5rem - 0.5 * var(--header-bottom-padding)));
	}

	.feedback {
		display: flex;
		align-items: center;
		position: absolute;
		top: 0;
		inset-inline-end: 0;
		height: var(--theme-mobile-toc-height);
		padding: 0.25rem var(--min-spacing-inline) calc(var(--header-bottom-padding) + 0.25rem);
	}
</style>
